import { decryptByDES } from '@/utils';
import { useEffect } from 'react';
import { useModel } from 'umi';

function OnlineProject() {

  const { initialState } = useModel('@@initialState');
  const { usercode, aesPassword }: any = initialState?.curUser;
  // const localStorageToken: any = localStorage.getItem('cpasToken');
  const tempPassword = decryptByDES(aesPassword);


  useEffect(() => {
    // const root: any = document.querySelector('#iframeID').contentWindow.document.getElementById('#root');

    let ele: HTMLElement | null;
    ele = document.querySelector('#root');
    if (ele) ele.style.height = 'calc(100vh - 2px ) ';
    // console.log(ele);
    // ele = document.querySelector('.ant-tabs .ant-tabs-top .ant-tabs-editable .ant-tabs-small .ant-tabs-card .ant-tabs-editable-card .page-tabs');
    // if (ele) ele.style.height = '100%';

    // // ele = document.querySelector('#root .ant-design-pro .ant-layout-has-sider .ant-layout .ant-layout-content .ant-tabs-top .ant-tabs-content-holder');
    // // if (ele) ele.style.height = 'calc(100vh - 36px)';
    // console.log(ele);
    // console.log(ele);
    // if (root) {}

  }, [])
  /**
   * 获取配置的url,支持以下参数 
      ${userConfig.cloudServer.host} 
      ${userConfig.cloudServer.port}   
      ${userConfig.cloudServer.protocol}
      ${userConfig.cloudServer.path}
  */
  function getFrameUrl() {
    let url = initialState?.settings?.frameUrl;
    if (url && window.main?.replaceParamsOfAll) {
      url = window.main.replaceParamsOfAll(url);
    }
    return url;
  }

  return (
    <iframe
      id='iframeID'
      width="100%"
      style={{ height: '100%', border: 'none' }}
      src={`${getFrameUrl()}&usercode=${encodeURIComponent(usercode)}&password=${encodeURIComponent(tempPassword)}`}
    />
  );
}

export default OnlineProject;
